<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxFlex="100" fxLayout="column">
    <div
        fxLayout="row"
        fxLayoutAlign="space-between center"
        *ngFor="let property of staticProperty.members; let i = index"
    >
        <div fxFlex="grow">
            <sp-app-static-property
                [deploymentConfiguration]="deploymentConfiguration"
                [adapterId]="adapterId"
                [eventSchemas]="eventSchemas"
                [parentForm]="parentForm"
                [showBorder]="false"
                [fieldName]="property.internalName + '-' + i"
                [staticProperty]="property"
            >
            </sp-app-static-property>
        </div>
        <div
            fxFlex="nogrow"
            style="width: 50px"
            fxLayout="row"
            fxLayoutAlign="end center"
        >
            <button mat-icon-button class="icon-button" (click)="remove(i)">
                <mat-icon class="icon">remove</mat-icon>
            </button>
        </div>
    </div>
    <div fxFlex>
        <sp-add-to-collection
            (addPropertyEmitter)="add($event)"
            [staticPropertyTemplate]="staticProperty.staticPropertyTemplate"
        ></sp-add-to-collection>
    </div>
</div>
